<template>
  <div>
    <div class="articletitle">
      <div>
        <h2>{{ Articlecontent.title }}</h2>
        <span v-if="Articlecontent.usernid === this.$store.state.userinfo.nid"
              @click="toEditArticle(Articlecontent.nid)"><img alt="" src="./image/edit.svg"></span>
      </div>
      <p>
        发布时间：<i>{{ Articlecontent.change_date }}</i>
        作者：<i>{{ Articlecontent.user }}</i>
        状态：<i>{{ Articlecontent.status }}</i>
      </p>
      <div>
        <img alt="" src="./image/tag.svg">
        <i v-for="(item,index) in Articlecontent.tag" :key="item.nid">{{ item.title }}</i>
      </div>
    </div>
    <div class="body">
      <div id="article_content">
        <mavon-editor
            :value="Articlecontent.content"
            :editable="false"
            :toolbarsFlag="false"
            :subfield="false"
            defaultOpen="preview"
            previewBackground="#ffffff"
            :boxShadow="false"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "ArticleContent",
  data() {
    return {}
  },
  methods: {
    // 跳转到编辑文章页面
    toEditArticle(id) {
      this.$router.push({
        name: "EditArticle",
        params: {
          id
        }
      })
    }
  },
  computed: {
    ...mapState('Article', ['Articlecontent'])
  },
  mounted() {

  }
}
</script>

<style scoped lang="less">
.articletitle {
  background-color: white;
  text-align: center;
  padding: 10px 0;

  div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;


    h2 {
      margin-right: 10px;
    }

    span {
      > img {
        width: 25px;
        height: 25px;
      }
    }
  }


  p {
    i {
      margin-right: 5px;
    }

    margin-bottom: 10px;
  }

  > div:last-child {
    img {
      width: 17px;
      height: 17px;
      margin-right: 5px;
    }

    i {
      color: orange;
      margin-right: 5px;
    }
  }

}

.body {
  margin-top: 1px;
  min-height: 300px;
  background-color: #ffffff;
  padding: 20px 10px;
}
</style>